@import "../../scss/plugin";

// NEW


.diary-edit-container{
  background-color: $bg-light;
  display: flex;
  flex-flow: row nowrap;
  font-family: "JetBrainsMonoDiary", "SF UI Display", "PingFang SC", "Microsoft Yahei UI", "Microsoft Yahei", "Helvetica", sans-serif;
}

.temperature-wrapper{
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
}


// 编辑器
textarea{
  width: 100%;
  display: block;
  line-height: 1.5;
  padding: 15px 20px;
  border: 1px solid $color-border;
  @include transition(box-shadow 0.5s);
  @include transition(-webkit-box-shadow 0.5s);
  @include border-radius($radius-pc);

  &.content{
    @include border-radius($radius-pc);
  }
  &:focus{
    border-color: $color-border-highlight;
    @include box-shadow(0 0 0 3px rgba(black, 0.1));
    @include transition(box-shadow 0.5s);
    @include transition(-webkit-box-shadow 0.5s);
  }
}



.diary-edit-content{
  position: relative;
  margin-right: 20px;
  flex-grow: 1;
  .editor-title{
    margin-bottom: 15px;
    textarea{
      height: 150px;
      resize: none;
      font-size: 1.1rem;
    }
  }
  .editor-content{
    position: relative;
    textarea{
      @include transition(all 0.3s);
      padding-bottom: 250px;
      overflow-x: hidden;
      overflow-y: scroll;
      resize: vertical;
      font-size: 1rem;
      &:focus{
        @include transition(all 0.3s);
      }
      &::-webkit-scrollbar {
        z-index: 50;
        width: 8px;
      }
      &::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0);
      }
      &::-webkit-scrollbar-thumb {
        border: 1px solid #cbcbcb;
      }
    }
    .editor-float-btn{
      display: flex;
      position: absolute;
      bottom: 10px;
      left: 10px;
    }
  }
}

// 日记 meta
.diary-edit-meta{
  width: 30%;
  > *{
    margin-bottom: 20px;
  }


  .editor-form{
    border: 1px solid $color-border;
    background-color: white;
    padding: 25px 25px;
    @include border-radius($radius-pc);
    justify-content: space-between;
    display: flex;
    flex-flow: row wrap;
  }

  $height-input: 35px;
  .editor-meta-switches{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    .editor-form-item{
      width: 45%;
      align-items: center;
      justify-content: space-between;
      display: flex;
      font-size: $fz-label;
      padding: 0 10px;
      label{
        padding-right: 10px;
        white-space: nowrap;
        @extend .unselectable;
        color: $text-label;
        line-height: $height-input;
      }
      &:hover{
        @include border-radius($radius-mobile);
        //background-color: transparentize($color-main, 0.9);
        label{
          color: $text-content;
        }
      }
    }
  }
}

// PC
@media (min-width: $grid-separate-width-big){
  .diary-edit-container{
    flex-flow: row nowrap;
    padding: 20px;
  }
  .diary-edit-meta{
    width: 350px;
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    justify-content: flex-start;
    > * {
      margin-bottom: 20px;
    }
  }
  .editor-form{
    flex-flow: column nowrap;
    align-items: flex-start;
    .editor-form-item{
      height: auto;
      &:last-child{
        margin-bottom: 0;
      }
    }
  }

}

// IPAD
@media (min-width: $grid-separate-width-md) and (max-width: $grid-separate-width-big) {
  .diary-edit-container{
    flex-flow: column nowrap;
    padding: 20px;
  }
  .diary-edit-content{
    margin-right: 0;
    margin-bottom: 15px;
    flex-grow: 0;
  }
  .diary-edit-meta{
    width: 100%;
    flex-flow: row wrap;
    .editor-form {
      display: flex;
      .editor-meta-switches{
        width: 50%;
      }
    }
  }
}


// MOBILE
@media (max-width: $grid-separate-width-md) {
  textarea {
    padding: 10px 15px;
  }
  .diary-edit-container {
    flex-flow: column nowrap;
    padding: 15px 10px 80px;

  }
  .diary-edit-content{
    margin-right: 0;
    margin-bottom: 15px;
    flex-grow: 0;
    .editor-title{
      textarea{
        //@include border-radius(0)
      }
    }
    .editor-content{
      textarea{
        height: 100px;
        padding-bottom: 0;
        //@include border-radius(0)
        &:focus{
          height: 300px;
        }
      }
      .editor-float-btn{
        display: none;
      }
    }
  }

  .diary-edit-meta{
    width: 100%;
    flex-flow: row wrap;
    > *{
      margin-bottom: 15px;
    }
    .editor-form{
      width: 100%;
      //@include border-radius(0);
    }
  }
}

@media (prefers-color-scheme: dark) {

  // FORM
  input[type=checkbox] + label.switch
  {
    background-color: $dark-border-active;
    @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1));
    &:before{
      background-color: $dark-bg;
      @include box-shadow(1px 2px 3px rgba(0,0,0,0.2));
    }
  }
  input[type=checkbox]:checked + label.switch
  {
    background-color: $green;
    @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1));
    &:before{
    }
  }

  // EDIT
  .diary-edit-container{
    background-color: $dark-bg;
  }
  textarea{
    color: $dark-text;
    border-color: $dark-border;
    background-color: $dark-bg-dark;
    &:focus{
      border-color: $dark-border-active;
      @include box-shadow(0 0 0 3px rgba(white, 0.1));
    }
    &::-webkit-scrollbar {
      background-color: transparent;
      z-index: 50;
      width: 8px;
    }
    &::-webkit-scrollbar-track {
      background-color: rgba(0, 0, 0, 0);
    }
    &::-webkit-scrollbar-thumb {
      border: 1px solid $dark-border-active !important;
    }
  }

  .year-container{
    background-color: $dark-bg;
  }

  .edit-category-selector{
    border-bottom-color: $dark-border;
    background-color: $dark-bg-dark;
    .category-wrapper{
      &:hover{
        .category{
          background-color: $dark-bg-selector;
        }
      }
    }
  }
  .weather-selector{
    border-bottom-color: $dark-border;
    background-color: $dark-bg-dark;
    .weather{
      &:hover{
        background-color: $dark-bg-selector;
      }
    }
  }
  .diary-edit-meta{
    .editor-form {
      border-color: $dark-border;
      .editor-form-item{
        border-bottom-color: $dark-border;
        label{
          color: $dark-text;
        }
        &:hover{
          @include border-radius($radius-mobile);
          label{
            color: $dark-text;
          }
        }
      }
      background-color: $dark-bg-dark;
    }
  }

}
